<template>
	<view class="content">
		<view class="field">
			<view class="name1">
				<image src="../../static/images/xing.png" mode=""></image>
				<view class="">
					请假班级
				</view>
			</view>
			<view class="value">
				<picker  @change="bindPickerChange" :value="index" :range="array" :disabled="datalist.length==0?true:false"  :range-key="'className'">
				     <view class="text-select">{{array[index].className?array[index].className:'请选择'}}</view>
				                    </picker>
				<view class="iconfont iconqianjin">		
				</view>
			</view>
		 
		</view>
		<view class="field">
			<view class="name1">
				<image src="../../static/images/xing.png" mode=""></image>
				<view class="">
					请假类型
				</view>
			</view>
			<view class="value" >
				<picker @change="bindPickerChange1" :value="index1"  :range-key="'name'" :range="array1">
				      <view class="text-select">{{array1[index1].name?array1[index1].name:'请选择'}}</view>
				      </picker>
				<view class="iconfont iconqianjin">
					
				</view>
			</view>
		</view>
		<view class="field">
			<view class="name1">
				<image src="../../static/images/xing.png" mode=""></image>
				<view class="">
					开始时间
				</view>
			</view>
			<view class="value" @click="openDatetimePicker">
				<view class="">
					{{
					   starttime ? starttime : "请选择"
					}}
				</view>
				<view class="iconfont iconqianjin">
					
				</view>
		 </view>
		</view>
		<view class="field">
			<view class="name1">
				<image src="../../static/images/xing.png" mode=""></image>
				<view class="">
					结束时间
				</view>
			</view>
			<view class="value" @click="openDatetimePicker1">
				<view class="">
					{{
					   endtime ? endtime : "请选择"
					}}
				</view>
				<view class="iconfont iconqianjin">
					
				</view>
			</view>
		</view>
		<view class="Infocase">
			<view class="">
				请假原因
			</view>
			<textarea class="textarea" v-model="reason" placeholder="请输入您的请假原因" auto-height />
		</view>
		<view class="infobg">
			
		</view>
		<view class="select-approver">
			<view class="s-t">
				选择审批人
			</view>
			<view class="s-b">
				<image v-if="this.title==''" src="../../static/images/photo.png" mode="" @tap="jumpToapprover"></image>
				<view v-if="this.title!==''" class="s-b-1">
					<image class="image1" :src="title.image" mode=""></image>
					<image class="image2" @tap="delInfo" src="../../static/images/class/X@2x.png" mode=""></image>
					<view class="">
						{{title.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="commit_1" @tap="submitLeaveApply">
			提交申请
		</view>  
		<!--datetime picker时间弹框-->
		<simple-datetime-picker ref="myPicker" @submit="handleSubmit" :start-year="2000" :end-year="2030"
			color="#488ee9"></simple-datetime-picker>
		<simple-datetime-picker ref="myPicker1" @submit="handleSubmit1" :start-year="2000" :end-year="2030"
			color="#488ee9"></simple-datetime-picker>
		
			
	</view>
</template>

<script>
	import simpleDatetimePicker from '@/components/buuug7-simple-datetime-picker/simple-datetime-picker.vue'
	export default {
		components: {
			simpleDatetimePicker
		},
		data() {
			return {
				starttime: '',
				endtime: '',
				index: 0,
				array: [
					{
						classOrActivityId:'',
						className:''
					}
				],
				index1: 0,
				array1: [
					{
						id:''
					}
				],
				pageNum:1,
				pageSize:50,
				classId:'',
				type:'',
				ClassTeacher:'',
				id:'',
				name:'',
				image:'',
				reason:'',
				title:'',
				show:false,
				datalist:[]
			};
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url:'./leaverecord'
			})
		},
		onLoad(option) {
			this.getLeaveApplyType()
			this.getClassOrdersList()
			console.log(option.id)
			this.image = option.image
			this.name = option.name
			this.id =option.id
		}, 
		onShow() {
			 this.getLeaveApplyType()
			 this.getClassOrdersList()
			uni.$on("handleFun", res => {
				console.log(res)
			        this.title = res.title
			        // 清除监听
			        uni.$off('handleFun');
			    })
				console.log('99999999999'+this.datalist.length)
				setTimeout(()=>{
					if(this.datalist.length===0){
						uni.showToast({
							title: '暂无报名班级！',
							duration: 1500,
							icon: "none",
							
						});
					}
				},1000)
				
		},
		methods: {
			delInfo(){
				this.title = ''
			},
				submitLeaveApply(){
					console.log(this.starttime)
					if(this.classId==='') {
						uni.showToast({
							title: '请重新选择班级！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.type===''){
						uni.showToast({
							title: '请重新选择请假类型！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.starttime===''){
						console.log(111)
						uni.showToast({
							title: '请选择请假时间！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.endtime===''){
						uni.showToast({
							title: '请选择请假时间！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.reason===''){
						uni.showToast({
							title: '请输入请假原因！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.checkUserId===''){
						uni.showToast({
							title: '请选择审批人！',
							duration: 1500,
							icon: "none",
							
						});
					}else{
					this.$api.submitLeaveApply({
						classId:this.classId,
						type:this.type,
						reason:this.reason,
						startTime:this.starttime,
						endTime:this.endtime,
						checkUserId:this.title.id
					}).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data.dataMap)
							uni.showToast({
								title: '提交成功！',
								duration: 1500,
								icon: "none",
								
							});
							this.classId = ''
							this.reason = ''
							this.type = ''
							this.title.id = ''
							this.starttime = ''
							this.endtime = ''
							this.title = ''
						}
					})
			}
			
			},
			Selelist(item){
				console.log(item)
			},
			classlesson(){
				this.$refs.popup.show()
			},
			// 请假类型
			getLeaveApplyType(){
				// this.array1 = []
				let _this = this
				this.$api.getLeaveApplyType({
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.length)
						_this.array1 = res.data.dataMap
						console.log(_this.array1)
					}
				})
				
			},
			// 请假班级
			async getClassOrdersList(){
				let _this = this
				console.log(1)
				// this.array1 = []
			   await this.$api.getClassOrdersList({
					status:0
				}, this.pageNum,this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						 _this.datalist = res.data.dataMap.list
						_this.array = res.data.dataMap.list
						// if(_this.datalist.length===0){
						// 	// debugger
						// 	_this.show = true
						// 	uni.showToast({
						// 		title: '暂无报名班级！',
						// 		duration: 2000,
						// 		icon:'none'
						// 	});
						// 	debugger
						// 	console.log(_this.show)
						// 				}

					}
				})
				
			},
			//跳转审批人页面
			jumpToapprover(){
				if(this.classId === ''){
					uni.showToast({
					    title: '请重新选择班级！',
					    duration: 2000,
						icon:'none'
					});
				}else{
					console.log(1)
					uni.navigateTo({
						url:'./Selectapprover?id='+this.classId
					})
				}
			},
			//请假班级
			bindPickerChange: function(e) {
				console.log(111)
				console.log(e)
				var _this = this
				_this.show = true
				// console.log('picker发送选择改变，携带值为', _this.array[e.target.value].classOrActivityId)
				_this.index = e.target.value
				console.log(_this.array)
				console.log(_this.array[e.target.value].classOrActivityId)
				_this.classId = _this.array[e.target.value].classOrActivityId
			},
			//请假类型
			bindPickerChange1: function(e) {
				this.type = this.array1[e.target.value].id
				console.log(this.array1[e.target.value].id)
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index1 = e.target.value
			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			openDatetimePicker1() {
				this.$refs.myPicker1.show();
			},
			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			// 监听选择
			handleSubmit(e) {
				this.starttime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
				console.log(this.starttime);
			},
			handleSubmit1(e) {
				console.log(e);
				this.endtime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			}
		}
	};
</script>

<style scoped>
	.s-t{
		font-weight: bold;
		color: #333333;
	}
	.scroll{
		border:1px solid red;
		margin-top: 200rpx;
	}
	.list{
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color:#666666
	}
	.name1{
		display: flex;
		
	}
	.commit_1{
		width: 600rpx;
		height: 88rpx;
		margin: 0 auto;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-top: 60rpx;
	}
	.field {
		width: 690rpx;
		height: 120rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx 0 30rpx;
		align-items: center;
		border-bottom: 3rpx solid #f8f8f8;
	}
	.name1>image{
		width: 14rpx;
		height: 12rpx;
		margin-top: 13rpx;
	}
	.name1>view{
		font-weight: bold;
		color: #333333;
	}
	.value{
		font-weight: 500;
		color: #999999;
		display: flex;
		align-items: center;
		
	}
	.value>view:nth-child(2){
		margin-left: 30rpx;
		font-size: 25rpx
	}
	.Infocase{
		width: 690rpx;
		height: 310rpx;
		padding: 0 30rpx 0 30rpx;
	}
	.Infocase>view:nth-child(1){
		font-weight: bold;
		color: #333333;
		padding-top: 40rpx;
	}
	.textarea{
		/* border:1px solid red; */
		width: 690rpx;
		height: 100rpx;
		padding-top: 10rpx;
		font-size: 28rpx;
	}
	.infobg{
		width: 750rpx;
		height: 20rpx;
		background-color: #F8f8f8;
	}
	.select-approver{
		width: 690rpx;
		min-height: 200rpx;
		padding: 30rpx 30rpx;
		
	}
	.s-b{
		margin-top: 30rpx;
		/* display: flex; */
		/* border: 1px solid red; */
	}
	.s-b>image{
		margin-left: 5rpx;
		width: 80rpx;
		height: 80rpx;
		
	}
	.s-b-1{
		float: left;
		position: relative;
	}
	.s-b-1>view{
		margin-top: -10rpx;
		margin-left: 13rpx;
	}
	.image1{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.image2{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -10rpx;
		left: 60rpx;
	}
</style>
